<template>
  <div class="header">
    <h4 class="title">场次安排</h4>
    <img class="picture" src="../../../../assets/img.png" />
  </div>

  <div class="bread">
    <GoBack style="margin-bottom: 20px" />
    <p class="breadtext">场次列表</p>
    <div class="btn">
      <a-button @click="openAddForm" size="large" shape="round" type="primary">
        <PlusOutlined />
        新增场次
      </a-button>
    </div>
  </div>

  <a-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="messagetitle">{{ item.title }}</p>
          </template>

          <template #description>
            <p>面试轮数： {{ item.interview_title }}</p>
            <p>面试时间： {{ item.date }}</p>
            <p>面试状态 {{ item.status }}</p>
          </template>
        </a-list-item-meta>

        <a @click="goBatchReserveList(item.id, item.interview_title, item.interview_id)"> {{ item.count }}已报名/{{ item.max }}可预约 </a>

        <template #actions>
          <a @click="downLoad(item.id, item.title)">点击下载签到码</a>
          <a @click="openAddForm(item.id)">编辑</a>
          <a-popconfirm title="确定要删除该消息?" ok-text="删除" cancel-text="取消" @confirm="onDelete(item.id)">
            <a v-show="role == '1'">删除</a>
          </a-popconfirm>
          <!-- <a v-show="role == '1'" @click="choosePushUsers(item.id)">推送</a> -->
        </template>
      </a-list-item>
    </template>
  </a-list>

  <open-drawer ref="RefChilde" @getData="getData()" :chosId="chosId" :type="type" :form="InterviewData" />
</template>

<script lang="ts">
import { defineComponent, Ref, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { get, detele } from '../../../../utils/request/request'
import { useRoute, useRouter } from 'vue-router'
import GoBack from '../../../../components/goback.vue'
import OpenDrawer from './OpenDrawer.vue'
import axios from 'axios'

interface DataItem {
  interview_id: number
  interview_title: string
  id: number
  title: string
  date: string
  max: number
  status: number | string
  count: number
}

const data: Ref<DataItem[]> = ref([])

// 获取列表数据
const useListDataEffect = (token: string) => {
  // 数据
  const getData = async () => {
    const route = useRoute()
    const id = route.params.id
    const res: any = await get(`/admin/api/v1/recruitment/interview/batch/list/${id}`, token)
    const modifiedData = res.data
    console.log(res.data)
    modifiedData.forEach((interview: DataItem) => {
      if (interview.status === 0) {
        interview.status = '未开始'
      } else if (interview.status === 1) {
        interview.status = '可预约'
      } else if (interview.status === 2) {
        interview.status = '停止预约'
      } else if (interview.status === 3) {
        interview.status = '可签到'
      } else if (interview.status === 4) {
        interview.status = '停止签到'
      }
    })
    data.value = modifiedData
    if (res.data == null) {
      message.info('没有数据')
    }
  }

  return {
    getData
  }
}

// 表格操作栏
const useOperationEffect = (token: string) => {
  const router = useRouter()
  const { getData } = useListDataEffect(token)

  // 查看已签到用户
  const goBatchReserveList = (id: number, title: string, interview_id: number) => {
    console.log(id)
    router.push({
      name: 'sessionReserveList',
      params: {
        id: id,
        title: title
      },
      query: {
        interview_id: interview_id
      }
    })
  }

  // 下载签到码
  const downLoad = async (id: number, title: string) => {
    // const res: any = await get(`/admin/api/v1/recruitment/interview/batch/${id}/qrcode`,token)
    axios
      .get(` http://test-api.deepcode.studio/admin/api/v1/recruitment/interview/batch/${id}/qrcode`, {
        headers: { 'Content-Type': 'multipart/form-data', Authorization: token },
        responseType: 'blob'
      })
      .then((res) => {
        console.log('请求成功', res.data)
        const blob = new Blob([res.data], {
          type: 'application/octet-stream'
        })
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `${title}.png`
        a.click()
        window.URL.revokeObjectURL(url)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  // 去打分
  const goInterview = (id: number, title: string, interview_id: number) => {
    console.log(id)
    router.push({
      name: 'scoreOperate',
      params: {
        id: id,
        title: title
      },
      query: {
        interview_id: interview_id
      }
    })
  }

  // 删除场次
  const onDelete = async (id: number) => {
    const res: any = await detele(`/admin/api/v1/recruitment/interview/batch/${id}`, {}, token)
    if (res.data.result == 0) {
      getData()
      data.value = data.value.filter((item) => item.id !== id)
    }
  }

  return {
    goBatchReserveList,
    goInterview,
    onDelete,
    downLoad
  }
}

// 子组件
const useChildEffect = (token: string) => {
  const chosId = ref<number | undefined>()
  const type = ref<number>(0) // 0为新增，1为编辑
  const InterviewData = ref()
  const RefChilde = ref()
  const openAddForm = async (id: number) => {
    console.log(id)
    chosId.value = id
    RefChilde.value.showDrawer()
    if (id > 0) {
      type.value = 1
      const res: any = await get(`/admin/api/v1/recruitment/interview/batch/${id}`, token)
      if (res.status_code === 0) {
        InterviewData.value = res.data
      } else {
        message.error('错误')
      }
    } else {
      type.value = 0
      InterviewData.value = undefined
    }
  }
  return { chosId, type, InterviewData, RefChilde, openAddForm }
}

export default defineComponent({
  components: {
    GoBack,
    OpenDrawer
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const token: string = localStorage.getItem('token') as string
    const route = useRoute()
    const id = ref<string>(route.params.id as string)
    const { getData } = useListDataEffect(token)
    const { goBatchReserveList, goInterview, onDelete, downLoad } = useOperationEffect(token)
    const { chosId, type, InterviewData, RefChilde, openAddForm } = useChildEffect(token)

    onMounted(() => {
      getData()
    })

    return {
      role,
      id,
      getData,
      data,
      goBatchReserveList,
      goInterview,
      onDelete,
      downLoad,
      chosId,
      type,
      InterviewData,
      RefChilde,
      openAddForm
    }
  }
})
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  display: inline-block;
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  width: 10%;
  margin-left: 660px;
  border-radius: 10px;
  background-color: #4c63e9;
}

.bread {
  display: flex;
}
.btn {
  padding-left: 800px;
}
.breadtext {
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  font-weight: bold;
  line-height: 50.4px;
  letter-spacing: 0.2em;
  color: #000000;
}
</style>
